<template>
	<view class="con">
		
		<view class="con_n" :style="'height:'+(get_h-50)+'px;'">
		<!--顶部的状态-->
		<view class="top_info ">
			<view class="flex" style="flex-direction: row;align-items: flex-end;">

				<image :src="get_img" mode="aspectFit" class="top_info_image" v-if="get_img" />
				<image :src="getimgpath(shopimg,300)" mode="aspectFit" class="top_info_image" v-else />
				

				<view class="select_info" :style="'width:'+(g_w-40-100)+'px'">
					<view style="flex-direction: row;align-items: flex-end;" v-if="buy_type == 4">
						<text class="select_info_price">{{datalist[0]?datalist[select[0]].point:0}}</text>
						<text class="icon_t">积分</text>
					</view>
					
					<view style="flex-direction: row;align-items: flex-end;" v-else>
						<text class="icon_t">￥</text>
						<text class="select_info_price">{{datalist[select[0]] && datalist[select[0]].arr?datalist[select[0]].arr[select[1]].price:'0.00'}}</text>
					</view>
					<text class="select_info_info">已选择：
					{{datalist[select[0]]?datalist[select[0]].color:''}}，
					{{datalist[select[0]] && datalist[select[0]].arr?datalist[select[0]].arr[select[1]].size:''}}，
					x{{num}}件</text>
				</view>

			</view>

			<view class="close" @click="$emit('close')">
				<text class="close_t">X</text>
			</view>
		</view>
		<!--中间的选择-->
		<scroll-view scroll-y class="center_select" :style="'height:'+(get_h-80-120-20-65)+'px'">
			<view class="dan_select">
				<text class="dan_select_title">款式</text>
				<view class="dan_select_list flex">


					<text class="dan_select_list_text" v-for="(d,i) in datalist"
					    :key="i"
						:style="select[0] == i?'border: 1px red solid;':'border: 1px #ccc solid;'"
						@click="change_(i)">
						{{d.color}}
					</text>

				</view>
			</view>


			<view class="dan_select">
				<text class="dan_select_title">参数</text>
				<view class="dan_select_list flex" v-if="datalist[select[0]]">

					<text class="dan_select_list_text" v-for="(d,i) in datalist[select[0]].arr"
					    :key="i"
						:style="select[1] == i?'border: 1px red solid;':'border: 1px #ccc solid;'"
						@click="select[1] = i">
						{{d.size}}
					</text>



				</view>
			</view>
			

			<!--数量选择-->
			<view class="num_select flex">
			<view></view>
			<view class="flex" style="flex-direction: row;align-items: center;padding-right: 10px;">
			<view class="num_add flex" @click="change_num(-1)">
			<text class="num_add_t">-</text>	
			</view>
			
			<view class="num_show">
			<text class="num_show_t">{{num}}</text>	
			</view>
			
			<view class="num_add flex" style="background: #f22328;" @click="change_num(1)">
			<text class="num_add_t">+</text>	
			</view>
			</view>
			</view>


		</scroll-view>

		<!--底部的递交-->
		<view class="post_in flex" @click="post_">
			<text class="post_in_t">确定</text> 
		</view>
		
		

	</view>
	</view>
</template>

<script>
	import $util from "@/util/util.js"
	import {openwin,get_img} from "@/util/tool.js"
	export default {
		name: "space",
		data() {
			return {
				datalist: [],
				select: [0, 0],
				num:1,
				get_h:uni.getSystemInfoSync().windowHeight,
				g_w:uni.getSystemInfoSync().windowWidth,
				
			};
		},
		computed: {
			get_img() {
				let img = '';
				let s = this.datalist[this.select[0]];
				if (s) {
					img = s.image != '' ? s.image : '';
					if (img == "" && s.arr) {
					img = s.arr[this.select[1]].image != '' ? 
					s.arr[this.select[1]].image : '';
					}
				}
				if(img == ''){
				return false;
				}
				return this.getimgpath(img,400);
			}
		},
		props: {
			shop_id: String,
			buy_type:Number,
			shopimg:String,
		}, 
		watch:{
			shop_id:{
			handler(e) {
			if(e && parseInt(e) >0){
			this.get_data();
			}
			},
			immediate: true, 
			}
		},
		methods: {
			get_data() {
				let that = this;
				console.log(that.shop_id)
				$util.showProgress();
				$util.ajax({
					url: 'Shop/get_space',
					shop_id: that.shop_id
				}, (res, err) => {
					$util.hideProgress();
					//console.log(JSON.stringify(res))
					//console.log(JSON.stringify(err))
					that.datalist = res.data
				})
			},
			getimgpath(path,size=400) {
				return get_img(path,size)
			},
			change_(i){
			this.select[0] = i;
			this.select[1] = 0;
			},
			post_(){
			let data = this.datalist[this.select[0]].arr[this.select[1]];
			//加购
			//$util.alert("d"+this.buy_type)
			if(this.buy_type == 2){
			this.add_cart(data);
			}else if(this.buy_type == 4){
			this.buy_point(data);	
			}else{
			this.buy_now(data);	
			}
			console.log(JSON.stringify(data))
			//$util.alert(this.buy_type)
			},
			add_cart(data){
			let that = this;
			$util.showProgress();
			data.url = 'Shop/add_cart';
			data.method = 'post';
			data.number = that.num,
			$util.ajax(data, (res, err) => {
				$util.hideProgress();
				console.log(JSON.stringify(res))
				console.log(JSON.stringify(err))
				if(res.code == 1){
				$util.alert(res.msg,()=>{
				that.$emit('addcart');
				})
				}else{
				$util.toast(res.msg)
				}
			})
			},
			buy_now(data){
			openwin('/pages/shop/order/order?type=detail&infoid='+data.id+'&num='+this.num);
			},
			buy_point(data){
			openwin('/pages/shop/pointshop/order?type=detail&infoid='+data.id+'&num=1');
			},
			change_num(i){
			if(i == 1){
			this.num = this.num +1;
			return
			}
			if(this.num == 1){
			$util.toast('不能再减了哟！')
			return
			}
			this.num = this.num -1;
			}
		}
	}
</script>

<style scoped>
	.con {
		/* #ifndef APP-NVUE */
		position: fixed;
		bottom: 0;
		left: 0;
		/* #endif */
		background-color: #ffffff;
		border-radius: 20px 20px 0 0;
		z-index: 11;
		width: 750rpx;
		box-shadow: 1px 2px 5px rgb(219 63 96 / 40%);
	}
	.con_n{
	position: relative;
	}

	.top_info {
		flex-direction: row;
		justify-content: space-between;
		position: relative;
		padding: 10px;
		align-items: flex-start;
	}

	.close {
		    background: #ff5b5b;
		    border-radius: 29px;
		    width: 25px;
		    height: 25px;
		    position: absolute;
		    right: 10px;
			top:10px;
			text-align: center;
	}
	.close_t{
	text-align: center;
	line-height: 25px;
	font-size: 14px;
	color: #ffffff;	
	}

	.top_info_image {
		width: 100px;
		height: 100px;
		border-radius: 10px;
		margin-right: 10px;
		background-color: #ececec;
	}

	.select_info {}

	.select_info_price {
		font-size: 18px;
		font-weight: bold;
		color: #f22528;
	}

	.select_info_info , .icon_t {
		font-size: 14px;
		color: #5d5d5d;
	}
	.select_info_info{
		margin-top: 10px;
		font-size: 12px;
	}

	.center_select {
		padding: 10px;
		width: 750rpx;
		/*
		overflow-y: scroll;
		*/
	}

	.dan_select {}

	.dan_select_title {
		font-size: 14px;
		color: #585858;
		font-weight: bold;
	}

	.dan_select_list {
		flex-direction: row;
		margin: 10px 0;
		flex-wrap: wrap;
	}

	.dan_select_list_text {
		padding: 7px 12px;
		margin-right: 10px;
		margin-bottom: 10px;
		border-radius: 5px;
		text-align: center;
		font-size: 12px;
		color: #585858;
		
	}

	.post_in {
		height: 45px;
	    box-shadow: 1px 2px 5px rgb(219 63 96 / 40%);
	    background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
	    border-radius: 50px;
	    position: absolute;
	    bottom: 20px;
	    left:10rpx; 
		width: 730rpx;
		text-align: center;
	}
	.post_in_t{
	font-size: 15px;
	font-weight: bold;
	color: #ffffff;	
	line-height: 45px;
	text-align: center;
	}
	
	/*数量选择*/
	.num_select{
	    flex-direction: row;
	    justify-content: space-between;	
		padding: 10px;
	}		
	.num_add{
		width: 40px;
		height: 30px;
		background: #dcdcdc;
		border: 1px #dcdcdc solid;
	}
	.num_add_t{
	text-align: center;
	line-height: 30px;
	color: #ffffff;
	font-size: 25px;	
	}
	.num_show{
	    width: 60px;
	    border: 1px #dcdcdc solid;	
		height: 30px;
		text-align: center;
	}
	.num_show_t{
	text-align: center;
	line-height: 30px;
	font-size: 14px;
	color: #585858;
	}
</style>
